<script setup>
</script>
<template>
  <div class="box">
    <!-- 标题 -->
    <div class="title">
      <t-swiper
        class="tdesign-demo-block--swiper"
        :duration="300"
        :interval="2000"
      >
        <t-swiper-item v-for="(item, index) in 4" :key="index">
          <div class="demo-item">
            <img src="../assets/siwper.png" style="width: 100%" />
          </div>
        </t-swiper-item>
      </t-swiper>
      <div class="title-top">
        <div>
          <img src="../assets/logo.png" style="width: 200px" />
        </div>
        <ul>
          <li>首页</li>
          <li>院部简介</li>
          <li>办学特色</li>
          <li>专业介绍</li>
          <li>领导关怀</li>
          <li>对外交流</li>
          <li>社会服务</li>
          <li>师资力量</li>
          <li>实训中心</li>
          <li>实习基地</li>
        </ul>
      </div>
    </div>
    <!-- 院部新闻 -->
    <div class="new">
      <div class="new-box">
        <div class="new-head">
          <div>院部新闻</div>
          <div>
            查看更多
            <div><img src="../assets/右箭头.png" /></div>
          </div>
        </div>
        <div class="new-top">
          <div class="new-top1">
            <img src="../assets/new1.jpeg" />
          </div>
          <div class="new-top2">
            <div class="new-top2-1">
              传承八一精神 凝聚奋进力量|旅游与服务系第一第二党支部开展主题...
            </div>
            <div class="new-top2-2">
              <div></div>
              <div>2022-11-02</div>
            </div>
            <div class="new-top2-3">
              传承八一精神 凝聚奋进力量|旅游与服务系第一第二党支部开展主题，传承八一精神...
            </div>
            <div class="new-top2-4">
              <div>
                <img src="../assets/左箭头按钮.png">
                <img src="../assets/右箭头按钮.png">
              </div>
              <div>
                <div>1</div>
                <div>/3</div>
              </div>
            </div>
          </div>
        </div>
        <div class="new-bottom">
          <div class="new-bottom-1">
            <div>传承八一精神 凝聚奋进力量|旅游与服务系第一第二党支部开展主题...</div>
            <div><img src="../assets/时间.png">2022-11-02</div>
          </div>
          <div class="new-bottom-2">
            <div>传承八一精神 凝聚奋进力量|旅游与服务系第一第二党支部开展主题...</div>
            <div><img src="../assets/时间.png">2022-11-02</div>
          </div>
          <div class="new-bottom-2">
            <div>传承八一精神 凝聚奋进力量|旅游与服务系第一第二党支部开展主题...</div>
            <div><img src="../assets/时间.png">2022-11-02</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 党团建设 -->
    <div class="build">
      <div class="build-box">
        <div class="build-left">
          <div class="build1">
            <div class="build1-left">
              <div>28</div>
              <div>2019-01</div>
            </div>
            <div class="build1-right">中餐学院2022级新生军训圆满闭营，中餐学院2022级新生军训...</div>
          </div>
          <div class="build1">
            <div class="build1-left">
              <div>28</div>
              <div>2019-01</div>
            </div>
            <div class="build1-right">中餐学院2022级新生军训圆满闭营，中餐学院2022级新生军训...</div>
          </div>
          <div class="build1">
            <div class="build1-left">
              <div>28</div>
              <div>2019-01</div>
            </div>
            <div class="build1-right">中餐学院2022级新生军训圆满闭营，中餐学院2022级新生军训...</div>
          </div>
          <div class="build1">
            <div class="build1-left">
              <div>28</div>
              <div>2019-01</div>
            </div>
            <div class="build1-right">中餐学院2022级新生军训圆满闭营，中餐学院2022级新生军训...</div>
          </div>
        </div>
        <div class="build-center">
          <img src="../assets/build.png">
        </div>
        <div class="build-right">
          <div class="build1">
            <div class="build1-right">中餐学院2022级新生军训圆满闭营，中餐学院2022级新生军训...</div>
            <div class="build1-left">
              <div>28</div>
              <div>2019-01</div>
            </div>
          </div>
          <div class="build1">
            <div class="build1-right">中餐学院2022级新生军训圆满闭营，中餐学院2022级新生军训...</div>
            <div class="build1-left">
              <div>28</div>
              <div>2019-01</div>
            </div>
          </div>
          <div class="build1">
            <div class="build1-right">中餐学院2022级新生军训圆满闭营，中餐学院2022级新生军训...</div>
            <div class="build1-left">
              <div>28</div>
              <div>2019-01</div>
            </div>
          </div>
          <div class="build1">
            <div class="build1-right">中餐学院2022级新生军训圆满闭营，中餐学院2022级新生军训...</div>
            <div class="build1-left">
              <div>28</div>
              <div>2019-01</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 技能大赛 -->
    <div class="skill">
      <div class="skill-box">
        <div class="skill-head">
          <div>技能大赛</div>
          <div>
            查看更多
            <div><img src="../assets/右箭头.png" /></div>
          </div>
        </div>
        <div class="skill-bottom">
          <div class="skill-bottom1">
            <img src="../assets/left.png">
          </div>
          <div class="skill-bottom2">
            <div class="skill-bottom2-box">
              <img src="../assets/skill.jpeg">
              <div class="skill-p2">我院参加全省技工院<br/>校学生资助管理工...</div>
              <div class="skill-p1">2021-09-10</div>
            </div>
            <div class="skill-bottom2-box">
              <img src="../assets/skill.jpeg">
              <div class="skill-p2">我院参加全省技工院<br/>校学生资助管理工...</div>
              <div class="skill-p1">2021-09-10</div>
            </div>
            <div class="skill-bottom2-box">
              <img src="../assets/skill.jpeg">
              <div class="skill-p2">我院参加全省技工院<br/>校学生资助管理工...</div>
              <div class="skill-p1">2021-09-10</div>
            </div>
          </div>
          <div class="skill-bottom3">
            <img src="../assets/right.png">
          </div>
      </div>
      </div>
    </div>
    <!-- 教研成果 -->
    <div class="result">
      <div class="result-box">
        <div class="result-top">
          <div class="result-top1">JIAO YAN CHENG GUO</div>
          <div class="result-top2">教研成果</div>
        </div>
        <div class="result-bottom">
          <div class="result-bottom1">
            <div>
              <div class="abc">山东城院“五心工程”<br/>温暖校园</div>
            </div>
            <div>3月24日，一场别开生面的“<br/>平台通过网络直播的形式拉<br/>开帷幕...</div>
          </div>
          <div class="result-bottom2">
            <div>
              <div class="abc">划重点！一图读懂山东<br/>城院“十四五”发<br/>展规划</div>
            </div>
            <div>3月20日下午，烟台市高新区<br/>管委副主任李如鹏、市教育<br/>局高新区分局...</div>
          </div>
          <div class="result-bottom2">
            <div>
              <div class="abc">划重点！一图读懂山东<br/>城院“十四五”发<br/>展规划</div>
            </div>
            <div>3月20日下午，烟台市高新区<br/>管委副主任李如鹏、市教育<br/>局高新区分局...</div>
          </div>
          <div class="result-bottom2">
            <div>
              <div class="abc">划重点！一图读懂山东<br/>城院“十四五”发<br/>展规划</div>
            </div>
            <div>3月20日下午，烟台市高新区<br/>管委副主任李如鹏、市教育<br/>局高新区分局...</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 学生动态 -->
    <div class="student">
      <div class="student-box">
        <div class="student-head">
          <div>学生动态</div>
          <div>
            查看更多
            <div><img src="../assets/右箭头.png" /></div>
          </div>
        </div>
        <div class="student-img">
          <div class="student-img1">
            <img src="../assets/student1.jpeg">
            <h2 class="student-ab1">迎新晚会·独唱</h2>
          </div>
          <div class="student-img2">
            <div class="student-img11">
              <img src="../assets/student2.jpeg">
              <div class="student-ab2">迎新晚会现代舞</div>
            </div>
            <div class="student-img22">
              <img src="../assets/student3.jpeg">
              <div class="student-ab3">运动会</div>
            </div>
            <div class="student-img33">
              <img src="../assets/student4.jpeg">
              <div class="student-ab4">运动会全景</div>
            </div>
            <div class="student-img44">
              <img src="../assets/student5.jpeg">
              <div class="student-ab5">才艺展示</div>
            </div>
          </div>
        </div>
        <div class="student-bottom">
          <ul>
            <li>友情链接</li>
            <li>中国人民共和国教育部</li>
            <li>山东教育厅</li>
            <li>山东省科学技术厅</li>
            <li>中国高职专教育网</li>
            <li>山东省科学技术厅</li>
            <li>中国高职专教育网</li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 联系我们 -->
    <div class="call">
      <div class="call-box">
        <div class="call-left">
          <div>联系我们</div>
          <div>办公室：0535-2246666</div>
          <div>招生咨询：0535-2246625</div>
          <div>官 网：www.sdcc.edu.cn</div>
          <div>邮 箱：sdccxy@126.com</div>
          <div>校 址:山东省烟台市高新区海天路1001号</div>
        </div>
        <div class="call-center">
          <img src="../assets/logo.png">
        </div>
        <div class="call-right">
          <img src="../assets/微信.png">
          <img src="../assets/微博.png">
        </div>
      </div>
      <div class="call-line">Copyright@山东省中餐学院授权所有</div>
    </div>
  </div>
</template>
<style lang="scss">
// 标题
.title {
  .t-swiper {
    position: relative;
  }
  .title-top {
    width: 80%;
    display: flex;
    position: absolute;
    z-index: 1;
    top: 20px;
    left: 140px;
    ul {
      width: 85%;
      display: flex;
      justify-content: space-between;
      list-style: none;
      color: #fff;
      font-size: 18px;
      font-weight: bold;
    }
  }
}
// 院部新闻
.new {
  margin-top: 50px;
  .new-box {
    width: 80%;
    margin: auto;
    .new-head {
      display: flex;
      justify-content: space-between;
      line-height: 35px;
    }
    .new-head div:nth-child(1) {
      color: #186ab4;
      font-size: 35px;
    }
    .new-head div:nth-child(2) {
      color: #b0b0b0;
      display: flex;
      div {
        margin-left: 5px;
        img {
          width: 25px;
        }
      }
    }
    .new-top {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      .new-top1 {
        width: 48%;
        img {
          width: 100%;
          height:400px;
        }
      }
      .new-top2 {
        width: 48%;
        border: 2px solid #F3F3F3;
        border-radius: 15px;
        padding: 18px;
      }
      .new-top2-1 {
        font-size: 25px;
        line-height: 50px;
      }
      .new-top2-2{
        margin-top:10px;
        display: flex;
      }
      .new-top2-2 div:nth-child(1) {
        border-bottom: 2px solid #e5e5e5;
        width:70%;
        margin-bottom:10px;
        margin-right:50px;
      }
      .new-top2-2 div:nth-child(2) {
        color: #186ab4;
        font-size: 18px;
        text-align: right;
      }
      .new-top2-3{
        margin-top:40px;
        font-size:18px;
        line-height:30px;
      }
      .new-top2-4{
        margin-top:80px;
        display: flex;
        justify-content: space-between;
      }
      .new-top2-4 div:nth-child(1){
        width:20%;
          display: flex;
          justify-content: space-between;
      }
      .new-top2-4 div:nth-child(1) img{
            width:40px;
      }
      .new-top2-4 div:nth-child(2){
        display: flex;
        line-height:30px;
       div:nth-child(1){
        color:#005BAD;
        font-size: 40px;
        margin-right:12px;
       }
       div:nth-child(2){
        color:#858585;
        font-size: 18px;
        line-height:40px;
       }
      }
    }
    .new-bottom{
      margin-top:40px;
      display: flex;
      justify-content: space-between;
      .new-bottom-2{
        padding:15px;
        width:29%;
        border: 2px solid #F3F3F3;
      }
      .new-bottom-1{
        padding:15px;
        width:29%;
        border: 2px solid #F3F3F3;
        background-color:#ABC9E5;
      }
      .new-bottom-2 div:nth-child(1),.new-bottom-1 div:nth-child(1){
          font-size:17px;
      }
      .new-bottom-2 div:nth-child(2),.new-bottom-1 div:nth-child(2){
        margin-top:20px;
        text-align: right;
        img{
          width:25px;
        }
          color:#4E85BD;
      }
    }
  }
}
// 党团建设
.build{
  background-color: #F9F9F9;
  margin-top:40px;
  .build-box{
    width:80%;
    margin:auto;
    display: flex;
    justify-content: space-between;
    padding-top:20px;
    padding-bottom:60px;
    .build-left{
      width:45%;
    }
    .build-right{
      width:45%;
    }
    .build1{
        margin-bottom:20px;
        display: flex;
        border: 3px solid #F3F3F3;
        height:22%;
        .build1-left{
          text-align: center;
          background-color: #005BAB;
          color:#fff;
          width:25%;
        }
        .build1-left div:nth-child(1){
          font-size: 32px;
        }
        .build1-left div:nth-child(2){
          font-size: 14px;
          font-weight:lighter;
        }
        .build1-right{
          font-size: 18px;
          padding:10px 10px 0 10px;
          background-color: #fff;
        }
      }
    .build-center{
      img{
        width:100%;
      }
    }
  }
}
// 技能大赛
.skill {
  margin-top: 50px;
  .skill-box {
    width: 80%;
    margin: auto;
    .skill-head {
      display: flex;
      justify-content: space-between;
      line-height: 35px;
    }
    .skill-head div:nth-child(1) {
      color: #186ab4;
      font-size: 35px;
    }
    .skill-head div:nth-child(2) {
      color: #b0b0b0;
      display: flex;
      div {
        margin-left: 5px;
        img {
          width: 25px;
        }
      }
    }
    .skill-bottom{
      text-align: center;
      margin-top:20px;
      display: flex;
      justify-content: space-between;
      .skill-bottom2{
        display: flex;
        justify-content: space-between;
        .skill-bottom2-box{
          position: relative;
          img{
            width:87%;
          }
          .skill-p1{
            position: absolute;
            background-color: #F1D12E;
            font-size: 12px;
            padding:5px;
            top:20px;left:30px;
          }
          .skill-p2{
            position: absolute;
            top:0;left:22px;
            color:#fff;
            font-size: 17px;
            font-weight:lighter;
            width:50%;
            padding:60px 10px 40px 10px;
            background-color:rgba(22, 88, 159, 0.6);
          }
        }
      }
      .skill-bottom1,.skill-bottom3{
        margin-top:80px;
        img{
          width:50%;
        }
      }
    } 
  }
}
// 教研成果
.result{
  background-image:url(../assets/result.jpeg);
  background-size: cover;
  height:500px;
  margin-top: 50px;
  .result-box{
    width: 80%;
    margin: auto;
    .result-top{
    position: relative;
    padding-top:60px;
    text-align: center;
    .result-top1{
      color:#fff;
      font-size: 25px;
    }
    .result-top2{
      position: absolute;
      top:50px;left:510px;
      color:#005CAC;
      font-size: 35px;
      font-weight: bold;
    }
  }
    .result-bottom{
      margin-top:50px;
      display: flex;
      justify-content: space-between;
      .result-bottom1,.result-bottom2{
        // border: 3px solid #F3F3F3;
        width:22%;
        border-radius:15px;
      }
      .result-bottom1 div:nth-child(1){
        background-image: url(../assets/result2.png);
        background-size: cover;
        height:180px;
        .abc{
          color:white;
          font-size: 18px;
          text-align: center;
          padding-top:70px;
        }
      }
      .result-bottom2 div:nth-child(1){
        background-image: url(../assets/result1.png);
        background-size: cover;
        height:180px;
        .abc{
          color:white;
          font-size: 18px;
          text-align: center;
          padding-top:70px;
        }
      }
      .result-bottom1 div:nth-child(2),.result-bottom2 div:nth-child(2){
        background-color: #fff;
        padding:20px;
        border-bottom-left-radius:15px;
        border-bottom-right-radius:15px;
        text-align: center;
        color:#666666;
        font-size: 15px;
      }
      .result-bottom1 div:nth-child(1),.result-bottom2 div:nth-child(1){
        background-color:rgba(0, 0, 0, 0.3);
        border-top-left-radius:15px;
        border-top-right-radius:15px;
      }
    }
  }
}
// 学生动态
.student{
  .student-box{
    width:80%;
    margin:auto;
    .student-head {
      margin-top:30px;
      display: flex;
      justify-content: space-between;
      line-height: 35px;
    }
    .student-head div:nth-child(1) {
      color: #186ab4;
      font-size: 35px;
    }
    .student-head div:nth-child(2) {
      color: #b0b0b0;
      display: flex;
      div {
        margin-left: 5px;
        img {
          width: 25px;
        }
      }
    }
    .student-img{
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
      img{
        width:100%;
        border-radius: 15px;
      }
      .student-img1{
        position: relative;
        width:48%;
        img{
          height:400px;
        }
        .student-ab1{
          position: absolute;
          top:30%;left:30%;
          font-size: 33px;
          color:white;
        }
      }
      .student-img2{
        width:50%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        img{
          height:195px;
        }
        div{
          width:48%;
        }
        .student-img11{
          position: relative;
          .student-ab2{
            position: absolute;
            bottom:10%;left:25%;
            color:#fff;
            font-size: 18px;
            font-weight: lighter;
          }
        }
        .student-img22{
          position: relative;
          .student-ab3{
            position: absolute;
            bottom:10%;left:40%;
            color:#fff;
            font-size: 18px;
            font-weight: lighter;
          }
        }
        .student-img33{
          position: relative;
          .student-ab4{
            position: absolute;
            bottom:10%;left:32%;
            color:#fff;
            font-size: 18px;
            font-weight: lighter;
          }
        }
        .student-img44{
          position: relative;
          .student-ab5{
            position: absolute;
            bottom:10%;left:35%;
            color:#fff;
            font-size: 18px;
            font-weight: lighter;
          }
        }
      }
    }
    .student-bottom{
      ul{
        list-style: none;
        display: flex;
      }
      li{
        margin-right:30px;
        font-size: 16px;
        line-height:30px;
      }
      li:nth-child(1){
        font-weight: bold;
        font-size: 20px;
      }
    }
  }
}
// 联系我们
.call{
  background-image: url(../assets/call.jpeg);
  background-size: cover;
  .call-box{
    border-bottom:1px solid grey;
    padding-top:20px;
    width:80%;
    margin:auto;
    display: flex;
    justify-content: space-between;
    .call-left{
      width:40%;
      color:#fff;
      line-height:30px;
      div:nth-child(1){
        font-size: 25px;
        margin-bottom:15px;
      }
    }
    .call-center{
      text-align: center;
      padding-top:50px;
      img{
        width:40%;
      }
    }
    .call-right{
      width:25%;
      text-align: center;
      margin-top:100px;
      display: flex;
      img{
        margin-right:40px;
        width:10%;
        height:24%;
        border:1px solid #fff;
        border-radius: 50%;
        padding:6px;
      }
    }
  }
  .call-line{
    padding:10px 0 10px 0;
    color:#809EC1;
    text-align: center;
  }
}
</style>
